<template>
  <div class="bind-confirm">
    <el-card v-if="showLogin" shadow="always" style="padding: 30px">
      <el-divider><i class="el-icon-mobile-phone">绑定系统账号</i></el-divider>
      <el-form :model="form" :rules="rules" ref="formRef" class="demo-form" style="width: 350px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%; margin-top: 20px" type="primary" @click="handleBindLogin">
            立即绑定
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { oauthCallback, checkAuthConfig, oauthRender, authLogin } from '@/api/system/user'
import { setToken } from '@/utils/auth'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'Oauth',
  data() {
    return {
      showLogin: false,
      form: {
        username: '',
        password: '',
      },
      detail: {},
      rules: {
        username: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  watch: {},
  mounted() {
    this.handleRender()
  },
  methods: {
    handleRender() {
      const token = this.$store.state.user.token
      const { query } = this.$route
      if (query.code) {
        return this.handleBinding()
      } else {
        return oauthRender(query.type).then((res) => {
          location.href = res
        })
      }
    },
    handleBinding() {
      const { query } = this.$route
      const { code, state, type } = query
      const _data = {
        type: type,
        callback: { code, state },
      }
      oauthCallback(_data).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.detail = { ...data }
          if (data && data.token) {
            this.handleLogin(data)
          } else {
            this.showLogin = true
          }
        }
      })
    },

    handleLogin(data) {
      const { token } = data
      setToken(token)
      this.$store.dispatch('SET_TOKEN', token)
      this.$router.push('/index')
    },

    handleBindLogin() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          const { query } = this.$route
          const { code, state, type } = query
          const _data = {
            type: type,
            ...this.detail,
            ...this.form,
            callback: { code, state },
          }
          authLogin(_data).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              setToken(data.token)
              console.log('执行了清空distr');
              localStorage.removeItem('distr');
              this.$store.dispatch('SET_AUTH', data.token)
              this.$router.push('/index')
            }
          })
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.bind-confirm {
  width: 100%;
  height: 100%;
  background: rgb(253, 247, 248);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
</style>
